<template>
	<view>
		<view class="UCenter-bg" catchtap='toMy_detail'>
		    <image class="user-icon" :src="user_data.icon"></image>

		    <view class="user-info">
		      <text class="username">{{user_data.user_name}}</text>
			  <view :class="user_data.sex=='女'?'female':'male'">
			  	
			  </view>
			  <!-- <text>{{user_data.sex}}</text> -->
		    </view>
			<view class="btns-top">
				<button type="default" class="add-character" @tap="showModal">+爱好</button>
				<view class="">
					<text>{{characters_text}}</text>
				</view>
			</view>
			
		    <!-- <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
		  </view>
		<!-- 用户信息end -->
		
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		
<!-- 		    <view class="flex flex-sub flex-direction solid-right" bindtap='toPraise'>
		      <view class="text-xxl text-orange">0</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-attentionfill"></text> 超赞</view>
		    </view> -->
		    <view class="flex flex-sub flex-direction solid-right" bindtap='toAttention' @tap="toFocus">
		      <view class="text-xxl text-blue">{{user_data.focused_users.length}}</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-favorfill"></text>关注数</view>
		    </view>
		    <view class="flex flex-sub flex-direction" @tap='toFans'>
		      <view class="text-xxl text-green">{{user_data.is_focused_users.length}}</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-fork"></text>粉丝数</view>
		    </view>
		    
		  </view>
		
		
		<!-- 设置详细 -->
		 <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
		    <view class="cu-item arrow">
		      <view class="content" @tap="toIssuePage">
		        <text class="cuIcon-titles text-green"></text>
		        <text class="text-grey">我的星球</text>
		          <!-- <text class='num'>19</text> -->
		      </view>

		    </view>
		    <view class="cu-item arrow">
		      <view class="content"  @tap="toMyTask">
		         <text class="cuIcon-appreciatefill text-red"></text>
		        <text class="text-grey">我的任务</text>
		            <!-- <text class='num'>99</text> -->
		      </view>
		    </view>
		    <view class="cu-item arrow">
		      <view class="content"  @tap="toReceived">
		        <text class="cuIcon-creativefill text-orange"></text> 
		        <text class="text-grey">我的接单</text>
		        <!-- <text class='num'>1</text> -->
		      </view>	
			</view>
		    <view class="cu-item arrow">
		      <view class="content"  @tap="toSales">
		         <text class="cuIcon-moneybagfill text-red"></text>
		        <text class="text-grey">我的商品</text>
		            <!-- <text class='num'>99</text> -->
		      </view>
		    </view>
		    <view class="cu-item arrow">
		      <view class="content"  @tap="toBuy">
		        <text class="cuIcon-formfill text-green"></text> 
		        <text class="text-grey">我的订单</text>
		        <!-- <text class='num'>1</text> -->
		      </view>
		    </view>
		      <view class="cu-item arrow">
		      <view class="content" bindtap="CopyLink" @tap="toMyAddress">
		        <text class="cuIcon-locationfill text-grey"></text>
		        <text class="text-grey">收货地址</text>
		      </view>
		    </view>
<!-- 		    <view class="cu-item arrow">
		      <view class="content" bindtap="toCollect">
		        <text class="cuIcon-appreciatefill text-red"></text>
		        <text class="text-grey">我的收藏</text>
		          <text class='num'>39</text>
		      </view>
		    </view> -->
<!-- 		    <view class="cu-item arrow">
		      <button class="cu-btn content" open-type="feedback">
		        <text class="cuIcon-writefill text-cyan"></text>
		        <text class="text-grey">意见反馈</text>
		      </button>
		    </view> -->
<!-- 		    <view class="cu-item arrow content">
		    <button class='cu-btn content' @click="clearAllStore">
		        <text class="cuIcon-creativefill text-orange"></text>
		        <text class="text-grey">清除缓存</text>
		   </button>
		    </view> -->
<!-- 		      <view class="cu-item arrow">
		      <navigator class="content" url='/pages/message/message_chat/message_chat'  hover-class="none">
		        <text class="cuIcon-evaluate_fill text-orange"></text>
		        <text class="text-grey">客服中心</text>
		      </navigator>
		    </view> -->
		  </view>
		  <button type="default" class="login-out" @tap="loginOut" v-if="is_show_login_out">注销</button>
		  <view class="cu-tabbar-height"></view>
		<!-- 设置详细end -->
		<view class=" cu-modal drawer-modal justify-start characters-box" :class=" show_modal == true?'show':'' ">
			<view class="characters">
				<view class="character-title">
					<text>选择您的爱好：</text>
				</view>
				<view class="character-labels">
					
					<button :class="item.selected!=true?'character':'selected-character'" type="default" v-for="(item,index) in character_labels" :key="index" @tap="selectLabel(index)">{{item.name}}</button>
				</view>	
				<view class="finish-select">
					<button type="primary"  @tap="hideModal" >完成</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import store from '../../globalStore/store.json'
	import data from '../../datas/data.json'
	export default {
		data() {
			return {
				user_data:'',
				show_modal:false,
				characters_text:"",
				character_labels:[],
				is_show_login_out:true
			}
		},
		onShow() {
			//#ifdef MP-WEIXIN
				this.is_show_login_out=false
			//#endif

			this.user_data=store.user;
			let user_labels=store.user.characters;
			let labels=data.labels.characters;
			
			if(user_labels.length!=0){
				this.characters_text=user_labels.slice(0,2)+"...";
				for(let i=0; i<labels.length; i++){
					
					if(user_labels.indexOf(labels[i].name)!=-1){
						labels[i].selected=true;
					}else{
						labels[i].selected=false;
					}
				}
			}

			
			this.character_labels=labels;
			uni.setTabBarBadge({
			  index: 3,
			  text: store.chats_count.toString()
			})
		},
		methods: {
			showModal:function(e){
			  //this.modalName = e.currentTarget.dataset.target
			  this.show_modal=true;
			},
				  // 隐藏分类模态框
			hideModal:function(e) {
			  //this.modalName = null
			  this.show_modal=false;
			  let list=[];
			  var that=this;
			  for(let i=0; i<this.character_labels.length; i++){
				  if(this.character_labels[i].selected==true){
					  list.push(this.character_labels[i].name);
				  }
			  }
			  store.user.characters=list;
			  this.characters_text=list.slice(0,2)+"...";
			  let id=store.user.user_id;
			  for(let i=0; i<data.users.length; i++){
				  if(data.users[i].user_id==id){
					  data.users[i].characters=list;
				  }
			  }
			  
			  uniCloud.callFunction({
			  	name:"setCharacters",
			  	data:{user_id:that.user_data.user_id, characters:list},
			  	success(res) {
			  		if(res.result.status==2){
						uni.showToast({
							title:"设置成功",
							duration:1000
						})
					}
			  	}
			  })
			},
			toMyTask(){
				uni.navigateTo({
					url:"/pages/my/my-tasks/my-tasks?user_id="+this.user_data.user_id
				})
			},
			toReceived(){
				uni.navigateTo({
					url:"/pages/my/my-received/my-received?user_id="+this.user_data.user_id
				})
			},
			  // 清除全部缓存
			  clearAllStore:function(res){
			      uni.showModal({
			        title: '清除缓存',
			        content: '是否要清除全部缓存!',
			        success:function(res){
			          if (res.confirm){
			                uni.clearStorage({
			                      success: function (res) {
			                        uni.showToast({
			                          title: '清除成功',
			                          duration: 1000
			                        })
			                      },
			                      fail: function (res) {
			                        uni.showToast({
			                          title: '清除失败',
			                          icon: 'none',
			                          duration: 1000
			                        })
			                      }
			                    });
			          }
			       
			        }
			       
			      })
			
			  },
			  toSales(){
				  
				uni.navigateTo({
					url:"/pages/my/my_sale/my_sale?user_id="+this.user_data.user_id
				})  
			  },
			  toBuy(){
				uni.navigateTo({
					url:"/pages/my/my_buy/my_buy?user_id="+this.user_data.user_id
				}) 				  
			  },
			  loginOut(){
				  uni.navigateTo({
				  	url:'../login/login'
				  })
			  },
			  selectLabel(index){
				  this.character_labels[index].selected=!this.character_labels[index].selected;
			  },
			  setCharacters(){
				  let list=[];
				  for(let i=0; i<this.character_labels.length; i++){
					  if(this.character_labels[i].selected==true){
						  list.push(this.character_labels[i].name)
					  }
				  }
				  this.store.user.characters=list;
				  uniCloud.callFunction({
				  	name:"setCharacters",
					data:{user_id:this.user_data.user_id, characters:list},
					success(res) {
						console.log(res);
					}
				  })
			  },
			  // 我的发布跳转
			  toIssuePage:function(){
				  uni.navigateTo({
				  	url:"/pages/my/my_issue/my_issue?user_id="+this.user_data.user_id
				  })
			  },
			toFocus:function(){
				uni.navigateTo({
					url:"my-focus-users/my-focus-users?user_id="+this.user_data.user_id
				})
			},
			toFans:function(){
				uni.navigateTo({
					url:"./focused-me-users/focused-me-users?user_id="+this.user_data.user_id
				})				
			},
			toMyAddress:function(){
				  uni.navigateTo({
				  	url:'my-address/my-address'
				  })
			  }
		}
	}
</script>

<style>

/* pages/my/my.wxss */
/* 用户信息 */
    .username{
		font-size: 19px;
		font-weight: bolder;
	}

	.UCenter-bg {
	/*  background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		background: #1CBBB4;
	  background-size: cover;
	  height: 450rpx;
	  display: flex;
	  justify-content: center;
	  padding-top: 40rpx;
	  overflow: hidden;
	  position: relative;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  font-weight: 300;
	  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
	  opacity: 0.8;
	}

	.UCenter-bg image {
	  width: 200rpx;
	  height: 200rpx;
	}

	.UCenter-bg .gif-wave{
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  width: 750rpx;
	  height: 300rpx;
	}
	.text-xl image{
	  height: 100rpx;
	  width: 100rpx;
	}
	.user-icon{
		width: 100px;
		height: 130px;
		border-radius: 50% 50%;
	}
	

	.num{
	  direction: rtl;
	  margin-left: 58%;
	  font-size: 25rpx;
	}
	.btns-top{
		width: 100%;
		display: flex;
		margin-left:29%;
	}
	.btns-top view{
		margin-left: -22%;
		margin-top: 5%;
		width:50%;
	}
	.btns-top view text{
		color:#000000;
	}
	.add-character{
		display: block;
		width: 20%;
		margin-top: 5%;
		font-size: 8px;
	}
	.login-out{
		margin-top: 25%;

		width: 50%;
		color: white;
		background:#0081FF;
	},
	.characters-box{
		background: white;

	}
	.characters{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.character-title{
		width: 100%;
	}
	.character-labels{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
	}
	.character-labels .character{
		width: 45%;
		height: 50px;
		font-size: 18px;
		margin-top: 4%;
	}
	.character-labels .selected-character{
		width: 45%;
		height: 50px;
		font-size: 18px;
		margin-top: 4%;	
		background: #1CBBB4;
		color: white;
	}
	.finish-select{
		width: 100%;
		margin-top: 50%;
	}
	.finish-select button{
		width: 60%;
	}
	.user-info{
		display: flex;
	}

</style>
